﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 
To Do: 	



 -->

<html>
<head>
<!-- <link rel='stylesheet' type='text/css' href='../jquery/themes/base/jquery.ui.all.css'> -->
<link rel='stylesheet' type='text/css' href='../jquery/themes/ui-lightness/jquery.ui.all.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='../jquery/ui/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery.ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery.ui.widget.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery.ui.button.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery.ui.droppable.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery.ui.position.js'></script>
<script type='text/javascript' src='../jquery/ui/jquery.ui.dialog.js'></script>
<script type='text/javascript'>
	
    $(document).ready(function () {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var dragged = null;
        var selected = null;
        var title = $( "#title" );
        var allFields = $( [] ).add( title );
        var tips = $( ".validateTips" );
        
        $(function() {
			// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
			$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
			function checkLength( o, n, min, max ) {
				if ( o.val().length > max || o.val().length < min ) {
					o.addClass( "ui-state-error" );
					updateTips( "Length of " + n + " must be between " +
						min + " and " + max + "." );
					return false;
				} else {
					return true;
				}
			}
				
			//Edit Dialog Code
			$( "#dialog-edit" ).dialog({
				autoOpen: false,
				height: 250,
				width: 350,
				modal: true,
				buttons: {
					"Save": function() {
						var bValid = true;
						allFields.removeClass( "ui-state-error" );
						bValid = bValid && checkLength( title, "event title", 1, 100 );
						if ( bValid ) {
							selected.title = title.val();
							$('#calendar').fullCalendar( 'updateEvent', selected );
							$( this ).dialog( "close" );
						}
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					allFields.val( "" ).removeClass( "ui-state-error" );
				}
			});
	
			$( "#create-user" )
				.button()
				.click(function() {
					$( "#dialog-form" ).dialog( "open" );
				});
			
			//Confirm Delete Dialog
			$( "#dialog-confirm" ).dialog({
				autoOpen: false,
				resizable: false,
				draggable: false,
				height:200,
				modal: true,
				buttons: {
					"Delete": function() {
						var event = dragged[1];
						$('#calendar').fullCalendar( 'removeEvents' , event.id  );
						dragged=null;
						$( this ).dialog( "close" );
					},
					Cancel: function() {
						var event = dragged[1];
						$('#calendar').fullCalendar( 'updateEvent', event );
						$( this ).dialog( "close" );
					}
				}
			});
		});
        
        //Drag to Trash Code
      	$("#bin").droppable({
	        tolerance: 'pointer',
	        drop: function(event, ui) { 
	            $(ui.helper).draggable({ revert: false });
	            $('#tip').css({}).hide();
	            if ( dragged && ui.helper && ui.helper[0] === dragged[0] ) {
	                var event = dragged[1];
	                $( "#dialog-confirm" ).dialog( "option", "title",event.title);
	                $( "#dialog-confirm" ).dialog( "open" );
	            }
	        }
	    });
    	
        //Calendar Code
        $('#calendar').fullCalendar({
            
            editable: true,
            
            eventClick: function( event, jsEvent, view ) {
            	selected = event;
            	$( "#dialog-edit" ).dialog( "open" );
           	},
            
            eventMouseover: function (event, jsEvent, view) {
                if(dragged == null)
                {
                	$('#eventTip').html('&nbsp' + event.title + '&nbsp');
                	$('#tip').css({ top: jsEvent.pageY+15, left: jsEvent.pageX+15 }).show();
               	}
            },

            eventMouseout: function (event, jsEvent, view) {
                $('#tip').hide();
            },
            
            eventDragStart: function( event, jsEvent, ui, view ) { 
            	dragged = [ ui.helper[0], event ];
            	$('#tip').hide();
             },
             
            events: [
				{
				    id: 1,
				    title: 'All Day Event',
				    start: new Date(y, m, 1)
				},
				{
				    id: 2,
				    title: 'Long Event',
				    start: new Date(y, m, d - 5),
				    end: new Date(y, m, d - 2)
				},
				{
				    id: 999,
				    title: 'Repeating Event',
				    start: new Date(y, m, d - 3, 16, 0),
				    allDay: false
				},
				{
				    id: 999,
				    title: 'Repeating Event',
				    start: new Date(y, m, d + 4, 16, 0),
				    allDay: false
				},
				{
				    id: 3,
				    title: 'Meeting',
				    start: new Date(y, m, d, 10, 30),
				    allDay: false
				},
				{
				    id: 4,
				    title: 'Lunch',
				    start: new Date(y, m, d, 12, 0),
				    end: new Date(y, m, d, 14, 0),
				    allDay: false
				},
				{
				    id: 5,
				    title: 'Birthday Party',
				    start: new Date(y, m, d + 1, 19, 0),
				    end: new Date(y, m, d + 1, 22, 30),
				    allDay: false
				},
			]
        });

    });

</script>
<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}
		
	#bin { 
		width: 100px; 
		height: 100px; 
		}
		
		.fc-view { /* prevents dragging outside of widget */
                overflow: visible;
        }
        
    #tip{
	    position:absolute;
	    z-index:999;
	    left:-9999px;
	    background-color:#dedede;
	    //background-color: lightblue;
	    padding:5px;
	    border:1px solid #fff;
	    //border:1px solid lightblue;
	    width:250px;
	}
	
	#tip p{
	    margin:0;
	    padding:0;
	    color:#fff;
	    background-color:#222;
	    padding:2px 7px;
	}
        
    
	
</style>
</head>
<body>

<div id="dialog-confirm">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to delete this event?</p>
</div>

<div style="display: none;" id="tip" class="ui-corner-all">
   <p id='eventTip'></p>
</div>

<div id="dialog-edit" title="Edit the event">
	<p class="validateTips">All form fields are required.</p>
	<form>
	<fieldset>
		<label for="title">Title</label>
		<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>

<table>
    <tr><td>Drag to bin to delete<p>Click to edit</p><p>Hover over event to reveal full title if truncated</p></td>
    <tr><td><div id='calendar'></div></td>
    <td><div id='bin'><img src='bin_S.png' /></div>
        </td></tr>
</table>
</body>
</html>
